<style>
.alone-items .layui-elem-field{width: 300px; margin: 0 auto 20px; text-align: center;}
.alone-items .layui-elem-field legend{padding: 0 15px;}
.alone-version-desc{position: relative; padding: 30px 50px 50px; border-radius: 0; border-top: 5px solid #ddd; background-color: #fff; text-align: center; transition: all .3s; -webkit-transition: all .3s;}
.alone-version-desc:hover{background-color: #f8f8f8;}
.alone-version-desc:hover h2{color: #000;}
.alone-version-desc h2{padding-bottom: 15px; font-size: 18px;}
.alone-badge{position: relative; display: inline-block; border: 1px solid #e6e6e6; line-height: 28px; padding: 0 15px; border-radius: 2px;}
.alone-tips{position: absolute; right: -35px; top: 1px; color: #999; font-size: 20px; cursor: pointer;}
.alone-version-desc ul{height: 330px; margin-top: 15px; text-align: left;}
.qa-main{font-size: 16px; line-height: 26px;}
.qa-main dt{padding-bottom: 10px; color: #000;}
.qa-main dd{margin-bottom: 30px; font-weight: 300; color: #767d85;}
@media screen and (max-width: 1395px) {
    img{max-width: 100%;}
    .layui-main{width: 100%; margin: 0;}
    .alone-banner h1{padding-top: 30px; font-size: 26px;}

    .alone-items{width: 1100px; margin: 50px auto;}
}
@media screen and (max-width: 992px) {
    .alone-items{width: 700px;}
}
@media screen and (max-width: 768px) {

    .alone-items{width: auto; margin: 20px 15px;}
    .alone-items .layui-elem-field{margin-bottom: 20px;}
    .alone-version-desc ul{height: auto; padding-bottom: 30px;}

    .alone-version-desc{padding: 30px;}
}
</style>
<div class="layui-main alone-items">
    <div class="layui-col-sm12">
        <blockquote class="layui-elem-quote layui-text">
            <ul>
                <li>
                    购买授权之前，建议认真阅读下述 <a href="#qa">“解惑”</a>，以免造成不必要的困惑。另外也可以阅读 <a
                        href="http://fly.layui.com/jie/26280/" target="_blank">《layui 付费产品服务条款》</a>
                    <!--如有其它疑问，也可以添加 layui 客服微信咨询：<a href="//cdn.layui.com/upload/2018_3/168_1521968603171_77146.jpg" target="_blank">layui-kf</a>-->
                </li>
            </ul>
            <p style="margin-top: 10px; ">
                <span style="color: #FF5722;">注意</span>：layuiAdmin 受国家计算机软件著作权保护（登记号：<a
                    href="http://cdn.layui.com/images/layuiAdmin-show.jpg" target="_blank">2018SR410669</a>），不得恶意分享产品源代码、二次转售等，违者必究。
            </p>
        </blockquote>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>选择</legend>
    </fieldset>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md6 layui-col-sm12">
            <div class="alone-version-desc layui-text">
                <h2>单页版</h2>
                <p>
          <span class="alone-badge">
            体验较好
            <i class="layui-icon alone-tips" lay-tips="推荐有一定前端开发经验，且对项目性能有一定追求的使用">&#xe702;</i>
          </span>
                </p>

                <ul>
                    <li style="color: #FF5722;">单页面应用方案，所有操作无需跳转</li>
                    <li style="color: #FF5722;">采用前后端分离开发模式，<strong>上手略难</strong></li>
                    <li style="color: #FF5722;">更友好的交互体验，减轻浏览器负载</li>
                    <li>始终基于全新的 layui 版本</li>
                    <li>面向全屏幕尺寸的响应式适配能力</li>
                    <li>灵活的主题色配置</li>
                    <li>专属的开发者文档，助你快速掌握</li>
                    <li>版本的持续更新，集大众之所需</li>
                    <li>layui 社区 VIP 标识</li>
                    <li>专属的会员专区，与同道中人隔空交流</li>
                    <li>不限制域名和应用的项目数量</li>
                </ul>
                <div style="margin-top: 15px;">
                    <a href="order/buy?goodsId=2" class="layui-btn layui-btn-fluid">选择授权</a>
                </div>
            </div>
        </div>

        <div class="layui-col-md6 layui-col-sm12">
            <div class="alone-version-desc layui-text">
                <h2>套餐版</h2>
                <p>
          <span class="alone-badge">
            单页版 + iframe版
            <i class="layui-icon alone-tips" lay-tips="推荐追求项目开发效率，又有一定上进心的开发者选择，你将获益匪浅。">&#xe702;</i>
          </span>
                </p>
                <i class="layui-badge" style="position: absolute; right: 180px; top: 30px;">hot</i>
                <ul>
                    <li>同时拥有“<strong>单页版</strong>”和“<strong>iframe版</strong>”的授权</li>
                    <li>不同项目自由选择，效率进阶两不误</li>
                    <li><strong>永久套餐版</strong>可附赠 <a href="http://layim.layui.com/" target="_blank">LayIM</a> 专业开发版</li>
                </ul>
                <div style="margin-top: 15px;">
                    <a href="order/buy?goodsId=2" class="layui-btn layui-btn-fluid">选择授权</a>
                </div>
            </div>
        </div>

    </div><br><br>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>解惑</legend>
    </fieldset>
</div>

<div class="layui-main alone-items" style="margin-bottom: 20px;">
    <dl class="layui-text qa-main">
        <dt>应该如何选择版本？</dt>
        <dd>
            通常我们推荐您选择<em>“套餐版”</em>，它同时包含了<em>“单页版”</em>和<em>“iframe版“</em>”，你随时可根据项目需求和团队情况，自由切换。但如果你只想从<em>“单页版”</em>和<em>“iframe版“</em>授权其中一个，那么我们需要进一步解释的是：
            <ul>
                <li>所谓<em>“单页版”</em>，即 SPA（单页面应用系统）开发模式，也就是所有的页面动作都是在一个宿主页面中完成，通常用于前后端分离。其中视图层全权由前端把控，数据一律走 Ajax
                    异步请求。layuiAdmin 内部实现了一套基于 location.hash 的路由和模板机制，这使得你可以很轻松地实现界面的跳转与渲染。另外注意的是，接口鉴权不再适用于传统的 session
                    模式，一般需要采用 JWT。总体来说，刚开始使用会相对有些复杂，但使用习惯后，项目会更易维护。
                </li>
                <li>所谓<em>“iframe版”</em>，即基于 iframe
                    容器跳转的多页面开发模式，视图层通常由服务端输出，每一个页面都在一个完全独立的空间中运行，因此一般适用于规模相对庞大的应用系统，它可以避免不同界面之间的冲突，但如果打开的 iframe
                    元素过多，浏览器负荷会相对较高。
                </li>
            </ul>
            一般对于大多数服务端程序员来说，<em>“iframe版”</em> 的上手难度要远低于<em>“单页版”</em>。
        </dd>

        <dt>在哪里可以看到价格？</dt>
        <dd>在上述任意版本介绍中点击“选择授权”，即可跳转到授权页面，系统会提示你登入 layui 社区账号，登入后可看到每个版本的价格。</dd>

        <dt>授权「一年」和「永久」有什么区别？</dt>
        <dd>授权时长只是限制在有效时间内提供“下载或更新”的权限，并不影响 layuiAdmin 在你项目中的实际使用。比如你选择的是「一年授权」，那么一年后你将无法从官网下载/更新
            layuiAdmin，而「永久授权」则可以永久下载/更新。
        </dd>

        <dt>如果选择了一年授权，如何升级为永久？</dt>
        <dd>从授权日开始，<em>三个月内</em>随时可补差价升级为永久。您只需要在<a href="#get">授权页面</a>选择需要升级的版本，系统将自动为你计算差价。</dd>

        <dt>如果选择错了版本，是否支持更换？</dt>
        <dd><em>“单页版”</em>和<em>“iframe版“</em> 之间不支持更换，只能补差价升级为<em>“套餐版”</em>。您只需要在<a href="#get">授权页面</a>选择套餐版，系统将自动为你计算差价。
        </dd>

        <dt>授权后将享受怎样的服务？</dt>
        <dd>
            layuiAdmin 的受众广泛主要得益于 layui 庞大的用户基础和工匠精神的开发团队，你除了将得到 layuiAdmin 的源代码之外，还享有以下售后服务：

            <ul>
                <li>1. 有权限进入 <a href="http://fly.layui.com/vipclub/list/layuiadmin/" target="_blank">layuiAdmin 会员专区</a>
                    ，任何技术问题均可在里面反馈，我们有专门的技术人员在第一时间为你解答（一般 15 分钟内）
                </li>
                <li>2. 有权限阅读最新的 <a href="http://fly.layui.com/docs/2/" target="_blank">layuiAdmin 入门文档</a> 和每期的更新日志。
                </li>
                <li>3. 如果您购买的是<em>套餐版永久授权</em>，系统还会邀请您加入到会员群（群号在社区系统消息里），里面也有专门的技术客服（@类友技术支持）</li>
            </ul>
        </dd>

        <dt>使用 layuiAdmin 有什么限制？</dt>
        <dd>layuiAdmin 不遵循任何开源许可证，它基于我们自身拟定的 LPPL 条款，详见：<a href="http://fly.layui.com/jie/26280/" target="_blank">《layui
            付费产品服务条款》</a></dd>

        <dt>还有其它疑问？</dt>
        <dd>
          如果您有更多疑问，并未能在上述找到答案，您也可以联系邮箱：xianxin#layui-inc.com（#换成@）
        </dd>
    </dl>
</div>